var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "react", "services/page-datas", "maishu-jueying", "json!websiteConfig", "services/local-service", "error-handle"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const React = require("react");
    const page_datas_1 = require("services/page-datas");
    const maishu_jueying_1 = require("maishu-jueying");
    const json_websiteConfig_1 = require("json!websiteConfig");
    const local_service_1 = require("services/local-service");
    const error_handle_1 = require("error-handle");
    requirejs({ context: json_websiteConfig_1.contextName }, ["css!devices"]);
    class DesignTimePage extends React.Component {
        constructor(props) {
            super(props);
            this.state = {};
        }
        componentDidUpdate() {
            if (this.masterPage)
                this.masterPage.style.value = this.props.color;
        }
        componentDidMount() {
            page_datas_1.pageDatas.home().then((record) => __awaiter(this, void 0, void 0, function* () {
                yield this.loadCompontents(record.pageData);
                this.setState({ pageData: record.pageData });
            }));
        }
        render() {
            let { pageData } = this.state;
            if (!pageData) {
                return React.createElement("div", null);
            }
            pageData.props = pageData.props || {};
            pageData.props.ref = (e) => {
                if (!e)
                    return;
                this.masterPage = e;
            };
            let c = maishu_jueying_1.Component.createElement(pageData);
            return c;
        }
        loadCompontents(pageData) {
            return __awaiter(this, void 0, void 0, function* () {
                let localService = new local_service_1.LocalService((err) => error_handle_1.default(err));
                let componentInfos = yield localService.componentInfos();
                let componentTypes = pageData.children.map(o => o.type);
                let componentToLoad = componentInfos.filter(o => o.name != null && componentTypes.indexOf(o.name) >= 0);
                let r = componentToLoad.map(componentInfo => {
                    return new Promise((resolve, reject) => {
                        let componentPath = componentInfo.path;
                        requirejs({ context: json_websiteConfig_1.contextName }, [componentPath], (mod) => {
                            console.assert(componentInfo.name != null);
                            console.assert(typeof mod[componentInfo.name] == "function");
                            maishu_jueying_1.Component.register(componentInfo.name, mod[componentInfo.name]);
                            resolve();
                        }, () => {
                            reject();
                        });
                    });
                });
                return Promise.all(r);
            });
        }
    }
    class VirtualMobile extends React.Component {
        constructor(props) {
            super(props);
            this.state = {};
        }
        render() {
            let scale = this.props.scale != null ? this.props.scale : 1;
            let color = this.props.color ? this.props.color : "default";
            let displayMobile = this.props.displayMobile == null ? true : this.props.displayMobile;
            let mainElement = React.createElement("div", { className: "screen mobile-page", style: { textAlign: "left" } },
                React.createElement(DesignTimePage, { color: color, pageName: "home" }));
            return displayMobile ? React.createElement("div", { className: `marvel-device iphone8 black`, style: { transform: `scale(${scale})` } },
                React.createElement("div", { className: "top-bar" }),
                React.createElement("div", { className: "sleep" }),
                React.createElement("div", { className: "volume" }),
                React.createElement("div", { className: "camera" }),
                React.createElement("div", { className: "sensor" }),
                React.createElement("div", { className: "speaker" }),
                mainElement,
                React.createElement("div", { className: "home" }),
                React.createElement("div", { className: "bottom-bar" })) : mainElement;
        }
    }
    exports.VirtualMobile = VirtualMobile;
});
